<template>
    <div class="auto-table">
        <!-- functional buttons -->
        <el-space>
            <el-button type="primary">新增</el-button>
            <el-button type="danger">删除</el-button>
        </el-space>

        <!-- table -->
        <div class="index-table-content">
            <el-table :data="new Array(200).fill({ type: 'a' })" border>
                <el-table-column label="序号" type="index" align="center" width="70" />
                <el-table-column label="A" prop="type" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="B" prop="defaultValue" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="C" prop="action" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="D" prop="measure" align="center" show-overflow-tooltip></el-table-column>

                <el-table-column fixed="right" label="操作" align="center" width="240">
                    <template #default="scope">
                        <el-button v-auth="'oil_mrzgl_edit'" text type="primary" icon="edit-pen"
                            size="small">修改</el-button>

                        <el-button v-auth="'oil_mrzgl_del'" text type="danger" icon="delete" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="200" />
        </div>
    </div>
</template>


<style lang="less" scoped>
.auto-table {
    height: 100%;
    display: flex;
    flex-direction: column;

    .index-table-content {
        flex: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
        margin-top: 15px;

        .el-table:nth-child(1) {
            flex: 1;
        }

        .el-pagination {
            margin-top: 15px;
            justify-content: flex-end;
        }
    }
}
</style>
